import React from 'react';
import { inject, observer } from 'mobx-react';
import { Checkbox } from 'antd';

@inject('portalLoginStore')
@observer
class E9Form extends React.Component {
    constructor(props) {
        super(props);
        this.getLoginForm = this.getLoginForm.bind(this);
        this.onLabelClick = this.onLabelClick.bind(this);
        this.onInputChange = this.onInputChange.bind(this);
        this.getDynamicPassword = this.getDynamicPassword.bind(this);
        this.onLogin = this.onLogin.bind(this);
    }

    componentDidMount() {
        const { portalLoginStore } = this.props;
        const { state = {} } = portalLoginStore;
        const { cacheAccount: loginId, langId } = state;
        portalLoginStore.getLoginForm({ loginId, langId });
    }

    componentDidUpdate() {
        const { portalLoginStore } = this.props;
        const { loginFormDataLoading } = portalLoginStore;
        if (loginFormDataLoading) {
            portalLoginStore.doAfterLoginRenderEvent();
        }

        const _this = this;
        jQuery('.e9login-form-input').unbind().keydown(function (e) {
            e = e || window.event;
            const key = e.keyCode || e.which || e.charCode;
            if (key == 13) {
                const inputs = jQuery('.e9login-form-input');
                const idx = inputs.index(this);
                const nxtIdx = idx + 1;
                const nxtInput = jQuery(`.e9login-form-input:eq(${nxtIdx})`);
                if (nxtInput.length > 0) {
                    nxtInput.focus();
                } else {
                    _this.onLogin();
                }
            }
        });
        const loginidvalue = jQuery('#loginid').val();
        const pwvalue = jQuery('#userpassword').val();
        if (loginidvalue != '') {
            jQuery('#loginid').prev().addClass('e9login-display-hidden');
        } else {
            jQuery('#loginid').prev().removeClass('e9login-display-hidden');
        }
        if (pwvalue != '') {
            jQuery('#userpassword').prev().addClass('e9login-display-hidden');
        } else {
            jQuery('#userpassword').prev().removeClass('e9login-display-hidden');
        }
    }

    render() {
        const { portalLoginStore } = this.props;
        const { labelObj, state, dynamicPasswordTime, onPasswordForget, onRememberChange, onValidateCodeChange } = portalLoginStore;
        const {
            isRememberPW,
            isRememberAccount,
            isRememberPassword,
            cacheAccount,
            cachePassword,
            loginSettingInfo = {},
            loginFormItems,
            loginFormHiddenItems,
            loginSetting = {},
            validateCode,
        } = state;
        const { loginForm = {} } = loginSettingInfo;
        const { color } = loginForm;
        const { needforgotpassword, validateCodeKey = '' } = loginSetting;
        const validateCodeSrc = `${validateCode}&validateCodeKey=${validateCodeKey}`;
        return (
            <div className="e9login-form">
                {
                    loginFormItems.map((item, index) => {
                        let defaultValue = '';
                        if (item.atype == 'account') {
                            defaultValue = cacheAccount;
                        } else if (item.atype == 'password') {
                            defaultValue = cachePassword;
                        }

                        let itemComp = (
                            <div key={index} className="e9login-form-item" style={{ color, borderBottom: `1px solid ${color}` }}>
                                <i className={`wevicon-e9login-${item.atype == 'account' ? 'account' : 'password'}`} />
                                <label className={`e9login-form-label ${defaultValue ? 'e9login-display-hidden' : ''}`} onClick={this.onLabelClick}>{item.label}</label>
                                <input type={item.type} id={item.id} name={item.name} autoComplete="new-password" className="e9login-form-input" defaultValue={defaultValue} onBlur={() => item.atype == 'account' && this.getLoginForm()} onChange={this.onInputChange} />
                            </div>
                        );

                        if (item.atype == 'dynamicPassword') {
                            itemComp = (
                                <div key={index} className="e9login-form-item" style={{ color, borderBottom: `1px solid ${color}` }}>
                                    <i className="wevicon-e9login-password" />
                                    <label className="e9login-form-label" onClick={this.onLabelClick}>{item.label}</label>
                                    <input type={item.type} id={item.id} name={item.name} autoComplete="new-password" className="e9login-form-input" onChange={this.onInputChange} />
                                    <div className="e9login-form-dynamic" style={{ color }}>
                                        {
                                            dynamicPasswordTime > 0 ? (
                                                <span className="e9login-form-dynamic-text" style={{ color: '#ccc' }}>
                                                    {labelObj.resend}({dynamicPasswordTime}s)
                                                </span>
                                                ) : (
                                                <span className="e9login-form-dynamic-text" onClick={this.getDynamicPassword}>
                                                    {labelObj.send}
                                                </span>
                                                )
                                        }
                                    </div>
                                </div>
                            );
                        }

                        if (item.atype == 'validatecode') {
                            itemComp = (
                                <div key={index} className="e9login-form-item" style={{ color, borderBottom: 'none' }}>
                                    <label className="e9login-form-label e9login-form-label-vc" onClick={this.onLabelClick}>{item.label}</label>
                                    <input type={item.type} id={item.id} name={item.name} className="e9login-form-input e9login-form-input-vc" style={{ border: `1px solid ${color}` }} onChange={this.onInputChange} />
                                    <div className="e9login-form-vc-img">
                                        <img src={validateCodeSrc} alt="" onClick={onValidateCodeChange} />
                                    </div>
                                </div>
                            );
                        }

                        return itemComp;
                    })
                }
                {
                    loginFormHiddenItems.map((item, index) => <div key={index} style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: item.html }} />)
                }
                <div className="e9login-form-remember" style={{ color }}>
                    {
                        needforgotpassword == '1' && (
                            <div className="e9login-form-remember-forget" title={labelObj.forgetPassword}>
                                <span onClick={() => onPasswordForget()}>{labelObj.forgetPassword}</span>
                            </div>
                        )
                    }
                    <div className={`e9login-form-remember-content ${isRememberPW == '1' ? '' : 'e9login-display-hidden'}`}>
                        <div className={'e9login-form-remember-account'} title={labelObj.rememberAccount}>
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@d7cg64`} checked={isRememberAccount} onChange={e => onRememberChange('account', e.target.checked)}>{labelObj.rememberAccount}</Checkbox>
                        </div>
                        <div className={'e9login-form-remember-password'} title={labelObj.rememberPassword}>
                            <Checkbox ecId={`${this && this.props && this.props.ecId || ''}_Checkbox@60d7og`} checked={isRememberPassword} onChange={e => onRememberChange('password', e.target.checked)}>{labelObj.rememberPassword}</Checkbox>
                        </div>
                    </div>
                    <div className="e9login-form-clear" />
                </div>
            </div>
        );
    }

    getLoginForm() {
        const { portalLoginStore } = this.props;
        portalLoginStore.getLoginForm();
    }

    onLabelClick(e) {
        jQuery(e.target.parentNode).find('input').focus();
    }

    onInputChange(e) {
        if (e.target.value) {
            jQuery(e.target.parentNode).find('.e9login-form-label').addClass('e9login-display-hidden');
        } else {
            jQuery(e.target.parentNode).find('.e9login-form-label').removeClass('e9login-display-hidden');
        }
    }

    getDynamicPassword() {
        const { portalLoginStore } = this.props;
        portalLoginStore.getDynamicPassword();
    }

    onLogin() {
        const { portalLoginStore } = this.props;
        portalLoginStore.onLogin();
    }
}

export default E9Form;
